<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宽度分离</title>
</head>
<body>
    <style>
        .f {
            border:1px solid red;
            width: 400px;
        }


        .son {
            border: 1px solid blue;
            height: 20px;
            padding:0 50px;
            transition: padding 1s;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .son:hover{
            padding:0 0px;
        }
    </style>
    <div>
        外层控制宽度，内层控制盒子， 这样等效css3的 box-sizing：border-box
    </div>
    <div class="f">
        <div class="son">父元素改变padding  border后 子元素会随着自动改变宽度</div>
    </div>
</body>
</html>